<script setup lang='ts'>
import MainStep from './MainStep.vue'
import Buy from './Buy.vue'
import Test from './Test.vue'
import PreSale from './PreSale1.vue'
import Delivery from './Delivery.vue'
import AfterSale from './AfterSale.vue'
import Audit from './Audit1.vue'
import Contract from './Contract.vue'
import ShenPi from '@/views/process/components/ShenPi.vue'

const changeTab = ref('1')
const route = useRoute()
const tabName = ref(route.query.type === '测试流程' ? '3' : '8')
const shenpiVisible = ref(false)
const flag = ref(false)
const edit = ref(false)
const isChange = ref('延续原方案')
const isChange1 = ref('+')
const datasp = [
  {
    person: '张三',
    price: 150000,
    status: '待审核',
    remark: 'xxxxxxx',
  },
  {
    person: '李四',
    price: 280000,
    status: '已通过',
    remark: 'xxxxxx',
  },
  {
    person: '王五',
    price: 360000,
    status: '已驳回',
    remark: 'xxxxxxxxxx',
  },
]
const datans = [
  {
    person: '雷宙川',
    type: '合同审批',
    status: '待审核',
    remark: 'xxxxxxx',
  },
  {
    person: '杜宁秀',
    type: '合同审批',
    status: '已通过',
    remark: 'xxxxxx',
  },
  {
    person: '薛姣萌',
    status: '已驳回',
    type: '交付审批',
    remark: 'xxxxxxxxxx',
  },
  {
    person: '薛萌',
    status: '已驳回',
    type: '测试审批',
    remark: 'xxxxxxxxxx',
  },
]
</script>

<template>
  <el-tabs v-model="tabName" type="border-card" tab-position="top" flex-1 style="width: calc(100% - 200px);">
    <template v-if="route.query.type !== '测试流程'">
      <el-tab-pane label="客户服务流程" flex space-x-4 name="1">
        <MainStep />
      </el-tab-pane>
    </template>

    <el-tab-pane v-if="route.query.type === '测试流程'" label="测试流程" name="3">
      <Test />
    </el-tab-pane>
    <el-tab-pane label="合同流程" name="2">
      <Contract />
    </el-tab-pane>
    <el-tab-pane label="采购流程" name="5">
      <Buy />
    </el-tab-pane>
    <el-tab-pane label="业务审批" name="6">
      <a-collapse :default-active-key="['2']" destroy-on-hide w-full>
        <a-collapse-item key="1" header="销售价格审批">
          <BaseTable :data="datasp" stripe w-full border :span-method="objectSpanMethod">
            <el-table-column prop="person" label="申请人" />
            <el-table-column prop="price" label="网内成本" />
            <el-table-column prop="price" label="销售成本" />
            <el-table-column prop="price" label="销售报价" />
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-tag v-if="row.status === '待审核'" type="info">
                  {{ row.status }}
                </el-tag>
                <el-tag v-else-if="row.status === '已通过'" type="warning">
                  {{ row.status }}
                </el-tag>
                <el-tag v-else-if="row.status === '已驳回'" type="danger">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>s
            <el-table-column prop="remark" label="申请原因" />
            <el-table-column prop="remark" label="审批意见/驳回原因" />
            <el-table-column label="申请时间" />
            <el-table-column label="审核时间" />
            <el-table-column label="操作" width="280">
              <template #default="{ row }">
                <el-button v-if="row.status === '已驳回'" type="primary">
                  重新发起
                </el-button>
                <el-button v-else type="primary" @click="shenpiVisible = true">
                  审核
                </el-button>
              </template>
            </el-table-column>
          </BaseTable>
        </a-collapse-item>
        <a-collapse-item key="2" header="业务审批">
          <BaseTable :data="datans" stripe w-full border>
            <el-table-column prop="person" label="申请人" />
            <el-table-column prop="type" label="类型" />
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-tag v-if="row.status === '待审核'" type="info">
                  {{ row.status }}
                </el-tag>
                <el-tag v-else-if="row.status === '已通过'" type="warning">
                  {{ row.status }}
                </el-tag>
                <el-tag v-else-if="row.status === '已驳回'" type="danger">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>s
            <el-table-column prop="remark" label="审批内容" />
            <el-table-column prop="remark" label="审批意见/驳回原因" />
            <el-table-column label="申请时间" />
            <el-table-column label="审核时间" />
            <el-table-column label="操作" width="280">
              <template #default="{ row }">
                <el-button v-if="row.status === '已驳回'" type="primary">
                  重新发起
                </el-button>
                <el-button v-else type="primary" @click="shenpiVisible = true">
                  审核
                </el-button>
              </template>
            </el-table-column>
          </BaseTable>
        </a-collapse-item>
      </a-collapse>
    </el-tab-pane>
    <el-tab-pane label="业务关停" name="7">
      <el-tabs v-model="changeTab" type="border-card" tab-position="top">
        <el-tab-pane
          label="第三次(2024-8-1)"
          name="1"
        >
          <a-collapse :default-active-key="['3']" destroy-on-hide w-full>
            <a-collapse-item key="1" header="销售">
              <el-descriptions
                :column="2"
                border
              >
                <el-descriptions-item label="关停内容">
                  xxx
                </el-descriptions-item>
                <el-descriptions-item label="关停原因">
                  xxxx
                </el-descriptions-item>
                <el-descriptions-item label="退订月租">
                  80000
                </el-descriptions-item>
                <el-descriptions-item label="对接人姓名">
                  张三
                </el-descriptions-item>
                <el-descriptions-item label="角色">
                  xxx
                </el-descriptions-item>

                <el-descriptions-item label="联系方式">
                  1991345678
                </el-descriptions-item>
                <el-descriptions-item label="关停日期">
                  2022-01-01
                </el-descriptions-item>
                <el-descriptions-item label="备注">
                  备注...
                </el-descriptions-item>
              </el-descriptions>
            </a-collapse-item>
            <a-collapse-item key="3" header="商务确认">
              <el-form label-width="auto" style="max-width: 600px">
                <el-form-item label="确认外采">
                  <el-radio-group v-model="flag">
                    <el-radio label="有">
                      有
                    </el-radio>
                    <el-radio label="无">
                      无
                    </el-radio>
                  </el-radio-group>
                  <span ml3>   (选择有时，交付阶段弹出框提示链接采购流程发起采购退订，完成后才可继续进行)</span>
                </el-form-item>
                <el-form-item v-if="flag === '有'" label="外采信息">
                  <el-input type="textarea" />
                </el-form-item>
                <el-form-item label="风险描述">
                  <el-input type="textarea" />
                </el-form-item>
              </el-form>
              <el-button type="primary" ml-4>
                确认
              </el-button>
            </a-collapse-item>
            <a-collapse-item key="4" header="运维确认">
              <el-form label-width="auto" style="max-width: 600px">
                <el-form-item label="风险描述">
                  <el-input type="textarea" />
                </el-form-item>
                <el-form-item label="备注">
                  <el-input type="textarea" />
                </el-form-item>
              </el-form>
              <el-button type="primary" ml-4>
                确认
              </el-button>
            </a-collapse-item>
            <a-collapse-item key="5" header="项目执行">
              <a-collapse :default-active-key="['3']" destroy-on-hide mt3 w-full>
                <a-collapse-item key="4" header="指定支撑人员">
                  <BaseTable
                    :data="[{
                      type: '工程人员',

                    }, {
                      type: '二线技术',
                    }, {
                      type: '产品开发',
                    }]" stripe w-full border
                  >
                    <el-table-column prop="type" label="人员类型" width="70" />
                    <el-table-column prop="person" label="支持人员">
                      <template #default="{ row }">
                        <el-select placeholder="">
                          <el-option label="王五" value="默认" />
                          <el-option label="王六" value="云专线" />
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="支撑内容">
                      <template #default="{ row }">
                        <el-input v-model="row.desc" placeholder="请输入" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="desc" label="支撑结果">
                      <template #default="{ row }">
                        <el-input v-model="row.desc" placeholder="请输入" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="time" label="风险评估">
                      <template #default="{ row }">
                        <el-input v-model="row.desc" placeholder="请输入" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="deadline" label="完成时间">
                      2024-10-1
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                      <template #default="{ row }">
                        <div>
                          <el-button type="primary">
                            编辑
                          </el-button>
                          <el-button type="primary">
                            完成支撑
                          </el-button>
                        </div>
                      </template>
                    </el-table-column>
                  </BaseTable>
                </a-collapse-item>
                <a-collapse-item key="3" header="关停确认">
                  <div class="form-block mb3 !w-1/2">
                    <el-form label-width="auto" style="max-width: 600px">
                      <el-form-item label="执行描述">
                        <el-input type="textarea" />
                      </el-form-item>
                      <el-form-item label="风险描述">
                        <el-input type="textarea" />
                      </el-form-item>
                    </el-form>
                    <el-button type="primary" ml-4>
                      确认
                    </el-button>
                  </div>
                </a-collapse-item>
              </a-collapse>
              <!-- c -->
            </a-collapse-item>
            <a-collapse-item key="6" header="退订结束">
              <div class="form-block mb3 !w-1/2">
                <el-form label-width="auto" style="max-width: 600px">
                  <el-form-item label="商务描述">
                    <el-input type="textarea" />
                  </el-form-item>
                  <el-form-item label="风险描述">
                    <el-input type="textarea" />
                  </el-form-item>
                </el-form>
                <el-button type="primary" ml-4>
                  确认
                </el-button>
              </div>
            </a-collapse-item>
          </a-collapse>
        </el-tab-pane>
        <el-tab-pane
          label="第二次(2024-7-1)【续约】"
          name="2"
        >
          第二次
        </el-tab-pane>
        <el-tab-pane
          label="第一次(2024- 6-1)"
          name="3"
        >
          第一次
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-tab-pane label="业务变更" name="8">
      <el-tabs v-model="changeTab" type="border-card" tab-position="top">
        <el-tab-pane
          label="第三次(2024-8-1)"
          name="1"
        >
          <a-collapse :default-active-key="['3']" destroy-on-hide w-full>
            <a-collapse-item key="1" header="销售">
              <el-descriptions
                :column="2"
                border
              >
                <el-descriptions-item label="SLA">
                  99.9%
                </el-descriptions-item>
                <el-descriptions-item label="价格变更">
                  +80000
                </el-descriptions-item>
                <el-descriptions-item label="项目经理">
                  张三  1991345678
                </el-descriptions-item>
                <el-descriptions-item label="售前">
                  李四
                </el-descriptions-item>

                <el-descriptions-item label="业务变更需求描述">
                  业务变更需求描述...
                </el-descriptions-item>
                <el-descriptions-item label="备注">
                  备注...
                </el-descriptions-item>
              </el-descriptions>
            </a-collapse-item>
            <a-collapse-item key="2" header="售前">
              <div>
                <el-radio-group v-model="isChange">
                  <el-radio label="延续原方案" />
                  <el-radio label="调整方案" />
                </el-radio-group>
                <template v-if="isChange === '调整方案'">
                  （<el-radio-group v-model="edit">
                    <el-radio label="重新编辑" />
                    <el-radio label="按需修改" />
                  </el-radio-group>）
                </template>
              </div>

              <div v-if="isChange === '延续原方案'">
                <el-form label-width="auto" style="max-width: 600px" mt4>
                  <el-form-item label="业务变化描述">
                    <el-input type="textarea" />
                  </el-form-item>
                </el-form>
                <div mb10 flex gap-5>
                  <div class="form-block" data-title="交付质量">
                    <el-form-item label="冗余要求">
                      <el-input />
                    </el-form-item>
                    <SLAItem />

                    <el-form-item label="交付时间">
                      <el-input />
                    </el-form-item>
                    <el-form-item label="其他要求">
                      <el-input />
                    </el-form-item>
                  </div>
                  <div class="form-block" data-title="公有云信息">
                    <el-form-item label="公有云接入区域">
                      <el-input />
                    </el-form-item>
                    <el-form-item label="客户账户/项目ID">
                      <el-input />
                    </el-form-item>
                  </div>
                </div>
                <div mb10 flex gap-5>
                  <div class="form-block" data-title="成本核算">
                    <el-form-item label="网内成本" label-width="70">
                      <el-input placeholder="">
                        <template #prepend>
                          <el-select v-model="isChange1" placeholder="请选择价格变更" style="width: 120px">
                            <el-option label="-" value="-" />
                            <el-option label="+" value="+" />
                          </el-select>
                        </template>
                        <template #append>
                          元
                        </template>
                      </el-input>
                    </el-form-item>

                    <el-form-item label="询价成本" value="" label-width="70">
                      <el-input placeholder="">
                        <template #prepend>
                          <el-select v-model="isChange1" placeholder="请选择价格变更" style="width: 120px">
                            <el-option label="-" value="-" />
                            <el-option label="+" value="+" />
                          </el-select>
                        </template>
                        <template #append>
                          元
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="销售成本" label-width="70">
                      <el-input value="3000" disabled>
                        <template #append>
                          元
                        </template>
                      </el-input>
                    </el-form-item>
                  </div>
                  <div class="form-block" data-title="售后服务">
                    <el-form-item label="服务级别" label-width="70">
                      <el-select placeholder="销售选了具体级别，则必填">
                        <el-option label="无" value="1" />
                        <el-option label="一级(鲸鱼)" value="1" />
                        <el-option label="二级(海豚)" value="2" />
                        <el-option label="三级(鲨鱼)" value="3" />
                        <el-option label="四级(杂鱼)" value="4" />
                      </el-select>
                    </el-form-item>

                    <el-form-item label="其他要求" label-width="70">
                      <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" />
                    </el-form-item>
                  </div>
                </div>
              </div>

              <PreSale v-else />
            </a-collapse-item>
            <a-collapse-item key="3" header="内审">
              <Audit />
            </a-collapse-item>
            <a-collapse-item key="4" header="交付">
              <Delivery />
            </a-collapse-item>
            <a-collapse-item key="5" header="验收">
              <AfterSale />
            </a-collapse-item>
          </a-collapse>
        </el-tab-pane>
        <el-tab-pane
          label="第二次(2024-7-1)【续约】"
          name="2"
        >
          a
        </el-tab-pane>
        <el-tab-pane
          label="第一次(2024- 6-1)"
          name="3"
        >
          a
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-tab-pane label="续约" name="9">
      <el-tabs v-model="changeTab" type="border-card" tab-position="top">
        <el-tab-pane
          label="第三次(2024-8-1)"
          name="1"
        >
          <a-collapse :default-active-key="['3']" destroy-on-hide w-full>
            <a-collapse-item key="1" header="销售">
              <el-descriptions
                :column="2"
                border
              >
                <el-descriptions-item label="价格变更">
                  +80000
                </el-descriptions-item>
                <el-descriptions-item label="续约备注">
                  备注...
                </el-descriptions-item>
              </el-descriptions>
            </a-collapse-item>
            <a-collapse-item key="3" header="内审">
              <Audit />
            </a-collapse-item>
            <a-collapse-item key="4" header="交付">
              <Delivery />
            </a-collapse-item>
            <a-collapse-item key="5" header="验收">
              <AfterSale />
            </a-collapse-item>
          </a-collapse>
        </el-tab-pane>
        <el-tab-pane
          label="第二次(2024-7-1)"
          name="2"
        >
          第二次
        </el-tab-pane>
        <el-tab-pane
          label="第一次(2024- 6-1)"
          name="3"
        >
          第一次
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
  </el-tabs>
  <ShenPi v-model="shenpiVisible" />
</template>

<style lang='scss'>
.arco-collapse-item-header {
  background-color: #f7f8fa !important;
}

.arco-collapse-item-content {
  background-color: #fff;
}

.el-divider :deep(.el-divider__text) {
  color: #666;
}

.form-block {
  width: 100%;
  padding: 15px;
  padding-top: 20px;
  margin-top: 10px;
  border: 2px dashed #ebeef5;
  border-radius: 4px;
  position: relative;
  &::after {
    content: attr(data-title);
    position: absolute;
    top: 0;
    background-color: #fff;
    font-weight: 500;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 10px;
  }
}
</style>
